<ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Show/Hide When</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>

      <div>
        <h2>Mode Tests</h2>
        <ion-show-when mode="md, ios">
          <div>Shows on MD, iOS</div>
        </ion-show-when>

        <ion-show-when mode="md">
          <div>Shows on MD only</div>
        </ion-show-when>

        <ion-show-when mode="ios">
          <div>Shows on iOS only</div>
        </ion-show-when>

        <ion-hide-when mode="md, ios">
          <div>Hides on MD, iOS</div>
        </ion-hide-when>

        <ion-hide-when mode="md">
          <div>Hides on MD only</div>
        </ion-hide-when>

        <ion-hide-when mode="ios">
          <div>Hides on iOS only</div>
        </ion-hide-when>
      </div>

      <br>
      <div>
        <h2>Orientation Tests</h2>
        <ion-show-when orientation="portrait">
          <div>Shows on portrait orientation</div>
        </ion-show-when>

        <ion-show-when orientation="landscape">
          <div>Shows on landscape orientation</div>
        </ion-show-when>

        <ion-hide-when orientation="portrait">
          <div>Hides on portrait orientation</div>
        </ion-hide-when>

        <ion-hide-when orientation="landscape">
          <div>Hides on landscape orientation</div>
        </ion-hide-when>
      </div>

      <br>
      <div>
        <h2>Platform Tests</h2>

        <ion-show-when platform="android,ios">
          <div>Render on Android and iOS</div>
        </ion-show-when>

        <ion-show-when platform="ios">
          <div>Only show on iOS</div>
        </ion-show-when>

        <ion-show-when platform="android">
          <div>Only show on Android</div>
        </ion-show-when>

        <ion-show-when platform="ipad">
          <div>Only show on ipad</div>
        </ion-show-when>

        <ion-show-when platform="phablet">
          <div>Only show on phablet</div>
        </ion-show-when>

        <ion-show-when platform="iphone">
          <div>Only show on phone</div>
        </ion-show-when>

        <ion-hide-when platform="android,ios">
          <div>Hides on Android and iOS</div>
        </ion-hide-when>

        <ion-hide-when platform="ios">
          <div>Only hide on iOS</div>
        </ion-hide-when>

        <ion-hide-when platform="android">
          <div>Only hide on Android</div>
        </ion-hide-when>

        <ion-hide-when platform="ipad">
          <div>Only hide on ipad</div>
        </ion-hide-when>

        <ion-hide-when platform="phablet">
          <div>Only hide on phablet</div>
        </ion-hide-when>

        <ion-hide-when platform="iphone">
          <div>Only hide on phone</div>
        </ion-hide-when>
      </div>

      <br>
      <div>
        <h2>Size Tests</h2>
        <ion-show-when size="xs">
          <div>Only show on xs</div>
        </ion-show-when>

        <ion-show-when size="sm">
          <div>Only show on sm</div>
        </ion-show-when>

        <ion-show-when size="md">
          <div>Only show on md</div>
        </ion-show-when>

        <ion-show-when size="lg">
          <div>Only show on lg</div>
        </ion-show-when>

        <ion-show-when size="xl">
          <div>Only show on xl</div>
        </ion-show-when>

        <ion-show-when size="xs, m">
          <div>Only show on XS or m</div>
        </ion-show-when>

        <ion-hide-when size="xs">
          <div>Only hide on xs</div>
        </ion-hide-when>

        <ion-hide-when size="sm">
          <div>Only hide on sm</div>
        </ion-hide-when>

        <ion-hide-when size="md">
          <div>Only hide on md</div>
        </ion-hide-when>

        <ion-hide-when size="lg">
          <div>Only hide on lg</div>
        </ion-hide-when>

        <ion-hide-when size="xl">
          <div>Only hide on xl</div>
        </ion-hide-when>

        <ion-hide-when size="xs, m">
          <div>Only hide on XS or m</div>
        </ion-hide-when>
      </div>

    </ion-content>
</ion-app>
